<div style="display: none">
    <div z-create-disk-offering="winNewDiskOffering" z-options="optionsCreateDiskOffering"></div>
    <div z-search="search" z-options="optionsSearch"></div>
    <div z-confirm="deleteDiskOffering" z-options="optionsDeleteDiskOffering"></div>
</div>

<div>
    <h3 class="z-h3">{{"diskOffering.diskOffering.DISK OFFERING" | translate}}</h3>
    <div class="btn-group-sm z-btn-bar">
        <button type="button" class="btn btn-default btn-sm" ng-click="funcRefresh()">
            <i class="fa fa-refresh"></i>
        </button>

        <button type="button" class="btn btn-default btn-sm" ng-click="funcSearch(search)">
            <i class="fa fa-search"></i>
        </button>

        <div z-sort-by z-options="optionsSortBy"></div>

        <button z-popover="popoverFilterBy" type="button" id="diskOfferingFilter" z-content-id="diskOfferingFilterContent" class="btn btn-default btn-sm" ng-click="filterBy.open(popoverFilterBy)">
            <i class="fa fa-filter"></i><span>&nbsp; {{filterBy.getButtonName()}}</span>
        </button>

        <button type="button" class="btn btn-success btn-sm" style="margin-left: 20px" ng-click="funcCreateDiskOffering(winNewDiskOffering)">
            <i class="fa fa-plus"></i>
            <span>&nbsp; {{"diskOffering.diskOffering.New Disk Offering" | translate}}</span>
        </button>

        <div id="diskOfferingFilterContent" style="display: none">
            <form class="form">
                <div class="form-group">
                    <label for="fieldList" class="z-block-label">{{"diskOffering.diskOffering.FILTER BY" | translate}}</label>
                    <select id="fieldList" kendo-drop-down-list k-options="filterBy.fieldList" ng-model="filterBy.field"></select>
                </div>
                <div class="form-group">
                    <label class="z-block-label" for="valueList">{{"diskOffering.diskOffering.VALUE" | translate}}</label>
                    <select kendo-drop-down-list id="valueList" ng-disabled="filterBy.isValueListDisabled()" k-options="filterBy.valueList" ng-model="filterBy.value"></select>
                </div>
                <button type="button" class="btn btn-sm btn-primary" ng-click="filterBy.confirm(popoverFilterBy)">{{"diskOffering.diskOffering.Confirm" | translate}}</button>
            </form>
        </div>

        <div class="btn-group" ng-show="funcIsActionShow()">
            <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" ng-disabled="funcIsActionDisabled()">
                {{"diskOffering.diskOffering.Action" | translate}} <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href ng-click="action.enable()" ng-show="model.current.isEnableShow()">{{"diskOffering.diskOffering.Enable" | translate}}</a></li>
                <li><a href ng-click="action.disable()" ng-show="model.current.isDisableShow()">{{"diskOffering.diskOffering.Disable" | translate}}</a></li>
                <li class="divider"></li>
                <li><a href style="color:red" ng-click="funcDeleteDiskOffering(deleteDiskOffering)">{{"diskOffering.diskOffering.Delete" | translate}}</a></li>
            </ul>
        </div>
    </div>

    <div kendo-grid="diskOfferingGrid" k-options="oDiskOfferingGrid.options" z-grid-double-click="funcGridDoubleClick" class="z-flat-table"></div>
    <p class="z-hint">{{"diskOffering.diskOffering.HINT1" | translate}}</p>
    <p class="z-hint">{{"diskOffering.diskOffering.HINT2" | translate}}</p>
</div>
